<template>
    <div class="content flex-col">
        <div class="tenant-header flex-row">
            <div class="tenant-header-left flex-row">

                <CgsButton style="width: 120px"
                           @click="handleAdd"
                >
                    <span class="button-icon add"></span>
                    新增
                </CgsButton>
                <CgsButton style="width: 150px"
                           @click="handleAddMoreMap"
                >
                    <span class="button-icon add"></span>
                    添加更多地图
                </CgsButton>
                <CgsButton style="width: 120px"
                           @click="handleAdd"
                >
                    <span class="button-icon earth"></span>
                    画地图
                </CgsButton>
            </div>
            <!--            <div class="tenant-header-right flex-row">-->
            <!--                <CgsButton style="width: 120px"-->
            <!--                           @click="handleAdd"-->
            <!--                >-->
            <!--                    <span class="button-icon add"></span>-->
            <!--                    添加角色-->
            <!--                </CgsButton>-->
            <!--            </div>-->
        </div>
        <div class="tenant-content tenant-table">
            <el-table
                    :data="tableData"
                    row-class-name="category-table-tr"
                    :header-cell-style="headerStyle"
                    style="width: 100%">
                <el-table-column
                        prop="roleName"
                        label="角色名称">
                </el-table-column>
                <el-table-column
                        prop="userSize"
                        label="用户数量">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit"
                                   @click="handleUpdate(scope.row)"
                                   type="text">编辑</el-button>
                        <el-button icon="el-icon-delete"
                                   @click="handleDelete(scope.row)"
                                   type="text" style="color: #E4E4E4">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {getRoleList, addRole, deleteRole, editRole, getAuthorityList, getRoleByID} from '@/api/authority'
    import CgsButton from "../components/CgsButton";
    export default {
        name: "db",
        data() {
            return {
                dialogVisible: false,
                headerStyle: {
                    background: "rgba(49,63,82,0.5) !important"
                },
                submitState: {
                    state: 'add',
                    node: {}
                },
                page: {
                    total: 200,
                    size: 10,
                    current: 1
                },
                form: {
                    roleName: '',
                    authorities: [],
                    roleAuthorities: [],
                    checkAll: false,
                    isIndeterminate: true
                },
                formLabelWidth: '120px',
                formRules: {
                    roleName: [
                        { required: true, message: '请输入角色名称', trigger: 'blur' },
                        { min: 2, message: '长度大于 2 个字符', trigger: 'blur' }
                    ],
                },
                tableData: []
            }
        },
        methods:{
            getList() {
                getRoleList({
                    type: "BACK_ROLE"
                }).then((res) => {
                    if (res.data && res.data.code === 200) {
                        this.tableData = res.data.data;
                    }
                });

                getAuthorityList().then((res) => {
                    if (res.data && res.data.code === 200) {
                        this.form.authorities = res.data.data;
                    }
                })
            },
            formSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogVisible = false;
                        if (this.submitState.state === "add") {
                            addRole({
                                "roleName": this.form.roleName,
                                "authorities": this.form.roleAuthorities,
                                "type": "BACK_ROLE"
                            }).then((res) => {
                                if (res.data && res.data.code === 200 && res.data.success) {
                                    this.$message.success("添加成功！")
                                    this.getList();
                                } else {
                                    this.$message.error("添加失败！")
                                }
                            })
                        }
                        else if (this.submitState.state === "update") {
                            let data = {
                                "id": this.submitState.node.id,
                                "roleName": this.form.roleName,
                                "authorities": this.form.roleAuthorities,
                                "type": "BACK_ROLE"
                            }
                            editRole(data).then((res) => {
                                if(res.data && res.data.success){
                                    this.$message.success("修改成功！")
                                    this.getList();
                                } else {
                                    this.$message.error("添加失败！")
                                }
                            })
                        }
                    } else {
                        return false;
                    }
                });
            },
            handleAdd() {
                this.form.roleName = "";
                this.form.roleAuthorities = [];
                this.form.checkAll = false;
                this.form.isIndeterminate = true;

                this.submitState.state = "add";
                this.dialogVisible = true;
            },
            handleAddMoreMap() {
                window.open('https://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4')
            },
            handleUpdate(row) {

                this.form.roleName = row.roleName;
                this.submitState = {
                    state: "update",
                    node: row
                };

                getRoleByID({
                    id: row.id
                }).then((res) => {
                    if(res.data && res.data.success){
                        this.form.roleAuthorities = res.data.data.authorities || [];
                        this.form.checkAll = this.form.roleAuthorities.length === this.form.authorities.length;
                        this.dialogVisible = true;
                    }
                })
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {deleteRole({"id": row.id}).then((res) => {
                    if (res.data && res.data.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList();
                    }
                    else {
                        this.$message.error('删除失败!');
                    }
                })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
        components: {
            CgsButton
        },
        created() {
            this.getList();
        }
    }
</script>

<style scoped>

</style>
